<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            height: 5000px;
        }

        .fixed {
            position: fixed;
            right: 10px;
            top: 0;
        }
    </style>
</head>

<body>
    <button class="openBtn">openBtn</button>
    <button class="closeBtn">closeBtn</button>
    <div class="fixed">
        <button class="scrollBy">scrollBy</button>
        <button class="scrollTo">scrollTo</button>
    </div>
</body>
<script>
    // window相关的属性和方法  => 全局对象 (属性和方法)

    // 属性:
    // window.innerWidth / window.innerHeight  获取窗口的可视宽高(文档 + 滚动条 但是不包含开发者工具)
    // window.outerWidth / window.outerHeight  获取窗口的实际宽高(文档 + 滚动条 + 开发者工具)
    // console.log(window.innerWidth, window.innerHeight);
    // console.log(window.outerWidth, window.outerHeight);

    // 方法:
    // open(url,name,desc);    打开新的窗口,或者查找已命名的窗口
    // url 新窗口中显示的地址
    // name 新窗口的名称
    // desc 新窗口的描述/特征

    // 返回值: 被打开的窗口的window对象

    // close();   关闭对应的窗口

    // scrollBy(x,y)    相较于当前页面中的位置进行滚动 (正值相加  复制相减)
    // scrollTo(x,y)    将滚动条滚动至页面中的位置

    var openBtn = document.getElementsByClassName("openBtn")[0];
    var closeBtn = document.getElementsByClassName("closeBtn")[0];
    var scrollByBtn = document.getElementsByClassName("scrollBy")[0];
    var scrollToBtn = document.getElementsByClassName("scrollTo")[0];

    var subWindow = null;

    openBtn.onclick = function () {
        // 打开百度
        // window.open("https://www.baidu.com");
        // window.open("https://www.baidu.com", "baidu");
        // window.open("https://www.baidu.com", "baidu", "width=400px,height=400px,left=100px,top=200px");

        // 被打开的窗口的window对象
        subWindow = window.open("./05 小广告.html", "adver")
    }

    // 关闭打开的窗口
    closeBtn.onclick = function () {
        if (subWindow) {
            subWindow.close();
        }
    }


    scrollByBtn.onclick = function () {
        window.scrollBy(0, 100);
    }


    scrollToBtn.onclick = function () {
        window.scrollTo(0, 1000);
    }






</script>

</html>